<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
        <button @click="fn">按钮</button>
        <p ref="myref">{{msg}}</p>
        <el-button @click="fn1"></el-button>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
    //   vue项目一蹴而就 从零开始创建到最后初始化好，直到销毁，需要一个过程 阶段的 
    // 先准备好数据，再准备好dom 
    // 当数据更新时候，先更新数据，然后再更新dom  
    // 好几个项目
    Vue.component('el-button',{
        template:`
            <button @click="$emit('click')">按钮</button>
        `
    })
      var vm = new Vue({
        el: '#app',
        data: {
            msg:'hello vue'
        },
        methods: {
            fn(){
                this.msg = 'hello world'
                // setTimeout(()=>{
                //     console.log(this.$refs.myref.innerHTML)
                // })
                this.$nextTick(()=>{
                    console.log(this.$refs.myref.innerHTML)
                })
            },
            fn1(){
                console.log(11111)
            }
        },
      })

    //   本次宏任务 微任务 宏任务
    // nextTick 

    //   function Person(){
    //       console.log()//beforeCreate 
          
    //       this.data = {
    //           msg:'hello vue'
    //       }
    //       console.log()//created
    //       this.el = '#app'
    //   }
    //   const zs = new Person()
    </script>
  </body>
</html>
